import { handleStrikeLabel, handlePostIssue, set_scrollHeight } from "../utils";
import {
  dataRes,
  drawerFormState,
  imgTipMap,
  isDisplay,
  refreshComponent,
  scrollRef,
  winRef,
} from "../store";
import styles from "../index.module.less";
import defaultAvatarUrl from "@/assets/img/default-avatar.png";
import { sexColorOptions, sexIconOptions } from "@user/pay/store";
import { WindowResizeChange } from "@/utils/tools";
import {
  dicts,
  drinkMap,
  educationalMap,
  eyeColorMap,
  hairColorMap,
  intentionMap,
  punchMap,
  raceMap,
  skinColorMap,
  smokeMap,
  tattooMap,
  userPowerMap,
  userSexMap,
  userTypeMap,
} from "../dict";
import { handleDisabledCustomer, handleOpenVip } from "..";
import { currencyUnit } from "./FormComponent/BasicUserInfo";
import IMToolTip from "@/components/common/ToolTip";
export default defineComponent({
  setup(props, { slots, expose, attrs, emit }) {
    const activeKey = ref(0);
    const $intention = isString(drawerFormState.intention)
      ? drawerFormState.intention.split(",")
      : drawerFormState.intention;
    return () => (
      <>
        <a-tabs
          vModel:activeKey={activeKey.value}
          onChange={(activeKey) => {
            if (activeKey === 0) {
              scrollRef.value.style.height = "auto";
              removeEvent(
                window,
                "resize",
                winRef.value?.callback ?? (() => {}),
                false
              );
            }
            if (activeKey === 1) {
              set_scrollHeight();
              winRef.value = new WindowResizeChange(set_scrollHeight, 300);
            }
          }}
        >
          <a-tab-pane key={0} tab={$t("user7")}></a-tab-pane>
          <a-tab-pane key={1} tab={$t("user8")}></a-tab-pane>
        </a-tabs>
        {activeKey.value === 0 ? (
          <div class={styles.detail_wrap}>
            <s-title>
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <div class={styles.title_wrap}>
                  <div>{$t("base.userInfo")}</div>
                  <div
                    class={[drawerFormState.account_type ? styles.type : ""]}
                  >
                    {selectDictLabel(userTypeMap, drawerFormState.account_type)}
                  </div>
                </div>

                <div
                  class="right"
                  style="display:flex;align-items: center;column-gap: 5px;"
                >
                  {$t("table89") + ":"}
                  {$intention?.length >= 1 ? (
                    <div class="s_flex_cell">
                      <i
                        class="Dashed fs10"
                        style="font-weight: normal;color: #333333;"
                      >
                        {selectDictLabel(intentionMap.value, $intention[0])}
                      </i>
                      <im-tooltip
                        color="#ffffff"
                        defaultValue={
                          <i
                            class="Dashed fs10"
                            style="font-weight: normal;color: #333333;"
                          >
                            {$intention.slice(1).length}
                          </i>
                        }
                        title={
                          <div class="s_title_containter">
                            {$intention.slice(1)?.map((item) => (
                              <div class="title_wrap fs10">
                                <i>
                                  {selectDictLabel(intentionMap.value, item)}
                                </i>
                              </div>
                            ))}
                          </div>
                        }
                      />
                    </div>
                  ) : null}
                </div>
              </div>
            </s-title>
            <div class={styles.customer_material}>
              <div class={styles.Flex}>
                {/* @ts-ignore */}
                <div class={styles.avatar_wrap} value={imgTipMap[1]}>
                  <a-image
                    class={styles.img}
                    src={
                      drawerFormState.avatar
                        ? drawerFormState.avatar
                        : defaultAvatarUrl
                    }
                  />
                  <span class={[styles.tag]}>
                    {+drawerFormState.real_person_status === 3
                      ? $t("dict37")
                      : $t("dict38")}
                  </span>
                </div>
                {drawerFormState?.account_picture?.length
                  ? drawerFormState.account_picture.map((url) => {
                      return url ? (
                        <div
                          class={styles.avatar_wrap}
                          //  @ts-ignore
                          // value={imgTipMap[url]}
                        >
                          <a-image class={styles.img} src={url} />
                        </div>
                      ) : null;
                    })
                  : null}
              </div>
              <div class={styles.user_wrap}>
                <div class={styles.row}>
                  <span>
                    <td
                      style={`display: flex;align-items: center;column-gap: 5px;justify-content:${
                        !isEmptyType(drawerFormState.nickname)
                          ? "flex-start"
                          : "center"
                      };`}
                    >
                      <i class={styles.strong}>{drawerFormState.nickname}</i>
                      {renderIcon(
                        sexIconOptions[drawerFormState.sex] +
                          " " +
                          styles["strong"],
                        null,
                        `color: ${sexColorOptions[drawerFormState.sex]}`
                      )}
                    </td>

                    <i>
                      {$t("table106") + "ID"}：{drawerFormState.uid}
                    </i>
                  </span>
                  <span>
                    <i class={{ "s-52c41a": !!drawerFormState.activedTime }}>
                      {drawerFormState.activedTime}
                    </i>
                    <i>
                      {$t("table13")}：{drawerFormState.channel}
                    </i>
                  </span>
                  <span></span>
                </div>
                <div class={styles.row}>
                  <span>
                    {$t("table2")}：+{drawerFormState.mobile_area + " "}
                    {drawerFormState.mobile_number}
                  </span>
                  <span>
                    {$t("table18")}：{getTimeByZone(drawerFormState.created)}
                  </span>
                  <span>
                    {$t("table114")}：{drawerFormState.origin}
                  </span>
                </div>
                <div class={styles.row}>
                  <span>
                    {$t("table14")}：{drawerFormState.merchantUser}
                  </span>
                  <span>
                    {$t("table12")}：{drawerFormState.country}
                  </span>
                  <span>
                    {$t("table19")}：{" "}
                    {getTimeByZone(drawerFormState.last_login_time)}
                  </span>
                </div>
                <div class={styles.row}>
                  <span>
                    {$t("table8")}：{drawerFormState.conversion}
                  </span>
                </div>
              </div>
            </div>

            <a-row class="s-drawer-extra-row">
              <a-col span={16}>
                <s-title>{$t("base.customInfo")}</s-title>
              </a-col>
              {isDisplay.value ? (
                <>
                  <a-col
                    span={drawerFormState.is_vip === 0 ? 4 : 8}
                    style="text-align: right"
                  >
                    {drawerFormState.is_lock === 0 ? (
                      <s-button
                        size="small"
                        style="width: 100px"
                        onClick={() =>
                          handleDisabledCustomer({
                            uid: drawerFormState.uid,
                            is_lock: drawerFormState.is_lock,
                            nickname: drawerFormState.nickname,
                          })
                        }
                      >
                        {$t("base.disableUser")}
                      </s-button>
                    ) : (
                      <s-button
                        size="small"
                        style="width: 100px"
                        onClick={() =>
                          handleDisabledCustomer({
                            uid: drawerFormState.uid,
                            is_lock: drawerFormState.is_lock,
                            nickname: drawerFormState.nickname,
                          })
                        }
                      >
                        {$t("base.enableUser")}
                      </s-button>
                    )}
                  </a-col>
                  {drawerFormState.is_vip === 0 ? (
                    <a-col span={4} style="text-align: right">
                      <s-button
                        size="small"
                        style="width: 100px"
                        onClick={() => handleOpenVip()}
                      >
                        {$t("base.openMember")}
                      </s-button>
                    </a-col>
                  ) : null}
                </>
              ) : null}
            </a-row>

            <div class={styles.customer_information}>
              <div class={styles.user_wrap}>
                <div class={styles.row}>
                  <span>
                    {$t("table107")}
                    {selectDictLabel(userSexMap, drawerFormState.sex)}
                  </span>
                  <span>
                    {$t("table1")}：{drawerFormState.age}
                  </span>
                  <span>
                    {$t("table86")}：{drawerFormState.birthday}
                  </span>
                  <span>
                    {$t("table108")}
                    {drawerFormState.height
                      ? drawerFormState.height + "cm"
                      : null}
                  </span>
                  <span>
                    {$t("table110")}
                    {drawerFormState.weight
                      ? drawerFormState.weight + "kg"
                      : null}
                  </span>
                </div>

                <div class={styles.row}>
                  <span>
                    {$t("table85")}：{drawerFormState.socialAccountType}/
                    {drawerFormState.social_account}
                  </span>
                  <span>
                    {$t("table5")}：
                    {selectDictLabel(
                      arrayToOptions(dicts.value.memberType, {
                        label: "name",
                        value: "id",
                      }),
                      drawerFormState.vip_level
                    )}
                  </span>
                  <span>
                    {$t("table7")}：
                    {selectDictLabel(
                      arrayToOptions(dicts.value.scoreLevel, {
                        label: "name",
                        value: "id",
                      }),
                      drawerFormState.score_level
                    )}
                  </span>
                  <span>
                    {$t("table109")}：{drawerFormState.constellation}
                  </span>
                  <span>
                    {$t("table9")}：{drawerFormState.friendNum}
                  </span>
                </div>

                <div class={styles.row}>
                  <span>
                    {$t("table10")}：{drawerFormState.clubNum}
                  </span>
                  <span>
                    {$t("table11")}：{drawerFormState.partyNum}
                  </span>
                  <span style="display: flex;column-gap: 5px;">
                    <i>{$t("table113")}：</i>
                    <span style="display: flex;column-gap: 5px;flex-wrap: wrap;">
                      {drawerFormState.places?.map((item: any) => (
                        <span
                          class={`flag-icon flag-icon-${item.toLowerCase()}`}
                        ></span>
                      ))}
                    </span>
                  </span>
                  <span style="flex: 2">
                    {$t("table6")}：
                    {selectDictLabel(
                      arrayToOptions(dicts.value.popularLevel, {
                        label: "name",
                        value: "id",
                      }),
                      drawerFormState.popular_level
                    )}
                  </span>
                </div>

                <div class={styles.row} style='align-items: "flex-start"'>
                  <span style="flex: 1">
                    {$t("table88")}：{drawerFormState.bio}
                  </span>

                  {drawerFormState.sex != 1 ? (
                    <span class={styles.video_wrap} style="flex: 1;">
                      <i>{$t("table90")}：</i>
                      {drawerFormState.cup}
                    </span>
                  ) : null}

                  <span
                    class={styles.video_wrap}
                    style={`flex: ${drawerFormState.sex != 1 ? 3 : 4}`}
                  >
                    <i>{$t("table82")}：</i>
                    <video-player v-model={drawerFormState.video} />
                  </span>
                </div>

                {drawerFormState.sex === 1 ? (
                  <div class={styles.row}>
                    <span style="flex: 1">
                      <i> {$t("table91")}：</i>
                      <i>
                        {selectDictLabel(
                          arrayToOptions(dicts.value.monthIncomeMap, {
                            label: "title",
                            value: "value",
                          }),
                          drawerFormState.month_income
                        )}
                      </i>
                      <i class="ml5">
                        ({$t("base.unit") + "：" + currencyUnit.value})
                      </i>
                    </span>
                    <span style="flex: 1">
                      {$t("table92") + "："}
                      {drawerFormState.occupation_id}
                    </span>
                    <span style="flex: 1"></span>
                    <span style="flex: 1"></span>
                  </div>
                ) : null}

                <div class={styles.row}>
                  <span>
                    {$t("table183")}：
                    {selectDictLabel(tattooMap, drawerFormState.tattoo)}
                  </span>
                  <span>
                    {$t("table76")}：
                    {selectDictLabel(skinColorMap, drawerFormState.skin_color)}
                  </span>
                  <span>
                    {$t("table77")}：
                    {selectDictLabel(hairColorMap, drawerFormState.hair_color)}
                  </span>
                  <span>
                    {$t("table162")}：
                    {selectDictLabel(eyeColorMap, drawerFormState.eye_color)}
                  </span>
                  <span>
                    {$t("table163")}：
                    {selectDictLabel(punchMap, drawerFormState.punch)}
                  </span>
                </div>

                <div class={styles.row}>
                  <span>
                    {$t("table173")}：
                    {selectDictLabel(raceMap, drawerFormState.race)}
                  </span>
                  <span>
                    {$t("table174")}：
                    {selectDictLabel(
                      educationalMap,
                      drawerFormState.educational
                    )}
                  </span>
                  <span>
                    {$t("table184")}：
                    {selectDictLabel(smokeMap, drawerFormState.smoke)}
                  </span>
                  <span style="flex: 2">
                    {$t("table213")}：
                    {selectDictLabel(drinkMap, drawerFormState.drink)}
                  </span>
                </div>
                <div class={styles.row}>
                  <span>
                    <i>{$t("user11")}：</i>
                    <i>{drawerFormState.can_provide}</i>
                  </span>
                </div>
              </div>
            </div>

            <s-title>{$t("base.customEquity")}</s-title>

            <div class={styles.customer_equity}>
              <div class={styles.user_wrap}>
                <div class={styles.row}>
                  <span>
                    {$t("table5")}：
                    {selectDictLabel(
                      arrayToOptions(dicts.value.memberType, {
                        label: "name",
                        value: "id",
                      }),
                      drawerFormState.vip_level
                    )}
                  </span>
                  <span>
                    {$t("table6")}：
                    {selectDictLabel(
                      arrayToOptions(dicts.value.popularLevel, {
                        label: "name",
                        value: "id",
                      }),
                      drawerFormState.popular_level
                    )}
                  </span>
                </div>

                <div class={styles.row}>
                  <span>
                    {$t("table7")}：
                    {selectDictLabel(
                      arrayToOptions(dicts.value.scoreLevel, {
                        label: "name",
                        value: "id",
                      }),
                      drawerFormState.score_level
                    )}
                  </span>
                </div>
              </div>
            </div>

            <a-row class="s-drawer-extra-row">
              <a-col span={20}>
                <s-title>{$t("base.labelInfo")}</s-title>
              </a-col>
              {isDisplay.value ? (
                <a-col span={4} style="text-align: right">
                  <s-button
                    size="small"
                    style="width: 100px"
                    onClick={() => handleStrikeLabel()}
                  >
                    {$t("base.markLabel")}
                  </s-button>
                </a-col>
              ) : null}
            </a-row>

            <a-row class="mb8 s-drawer-extra-row" gutter={5}>
              <a-col class="ml8">
                <i class={styles.title}>{$t("table93")}：</i>
              </a-col>
              {drawerFormState?.tag_ids?.length
                ? (() => {
                    const userTags = getItemsById(
                      [
                        ...(dicts?.value?.userTags ?? []),
                        ...(dataRes?.value?.accountTag ?? []),
                      ],
                      drawerFormState.tag_ids,
                      {
                        keys: ["tag_name", "tag_id"],
                        values: ["tag_name", "tag_id"],
                      }
                    );
                    return (
                      userTags?.map((item) => (
                        <a-col class="mb5" key={item.diff_key}>
                          {item?.tag_name ? (
                            <a-tag>{item.tag_name}</a-tag>
                          ) : null}
                        </a-col>
                      )) ?? null
                    );
                  })()
                : null}
            </a-row>

            <a-row class="mb8 s-drawer-extra-row" gutter={5}>
              <a-col class="ml8">
                <i class={styles.title}>{$t("table94")}：</i>
              </a-col>
              {drawerFormState?.accountSystemTag?.length
                ? (() => {
                    const systemTags = getItemsById(
                      dicts.value.systemTags,
                      drawerFormState.accountSystemTag,
                      {
                        keys: ["tag_name", "tag_id"],
                        values: ["tag_name", "tag_id"],
                      }
                    );
                    return (
                      systemTags?.map((item) => (
                        <a-col class="mb5" key={item.diff_key}>
                          {item?.tag_name ? (
                            <a-tag>{item.tag_name}</a-tag>
                          ) : null}
                        </a-col>
                      )) ?? null
                    );
                  })()
                : null}
            </a-row>
          </div>
        ) : (
          <div class={styles.detail_wrap}>
            <a-row class="s-drawer-extra-row">
              <a-col span={20}>
                <s-title>{$t("base.worldWall")}</s-title>
              </a-col>
              {isDisplay.value ? (
                <a-col span={4} style="text-align: right">
                  <s-button
                    size="small"
                    style="width: 100px"
                    onClick={() => handlePostIssue()}
                  >
                    {$t("base.postTrends")}
                  </s-button>
                </a-col>
              ) : null}
            </a-row>
            {refreshComponent.value ? (
              <div ref={(el) => (scrollRef.value = el)} class={styles.scroll}>
                {drawerFormState?.dynamics?.length
                  ? drawerFormState.dynamics.map((dynamicItem: any) => {
                      return (
                        <a-row
                          class="mb8 s-drawer-extra-row"
                          style="border-bottom: 1px solid #909090;"
                        >
                          <a-row class="mb8 s-drawer-extra-row">
                            <a-col span={24} class="ml8">
                              <i style="font-weight: bold;">
                                {$t("base.power")}：
                                {selectDictLabel(
                                  userPowerMap,
                                  dynamicItem.auth
                                )}
                              </i>
                            </a-col>
                          </a-row>
                          <a-row
                            class="mb8 s-drawer-extra-row"
                            gutter={5}
                            style="align-items: flex-start"
                          >
                            <div class={styles.Flex}>
                              <video-player v-model={dynamicItem.video} />
                              {dynamicItem?.picture?.map?.(
                                (url: string | undefined, index: number) => (
                                  <a-col class={styles.col}>
                                    <a-image
                                      src={url}
                                      class={styles.img}
                                      onClick={() =>
                                        $preview(index, dynamicItem.picture)
                                      }
                                      preview={false}
                                    />
                                  </a-col>
                                )
                              )}
                            </div>
                            <a-col>
                              <pre>{dynamicItem.content}</pre>
                            </a-col>
                          </a-row>
                          <a-row class="mb16 ml8 s-drawer-extra-row">
                            <a-col span={24}>
                              <div>{dynamicItem.location}</div>
                              <div class={styles.dynamic_time}>
                                <i style="font-weight: bold;">
                                  {dynamicItem.created_at
                                    ? getTimeByZone(dynamicItem.created_at)
                                    : null}
                                </i>
                              </div>
                            </a-col>
                          </a-row>
                        </a-row>
                      );
                    })
                  : null}
              </div>
            ) : null}
          </div>
        )}
      </>
    );
  },
});
